<template>
  <div id="app" class="clearfix">
    <div class="logo"></div>
    <div>
      <router-view></router-view>
    </div>
      <ul class="nav">
        <li>
          <router-link to="/home" class="home" :class="{'homes':isa}" @click="isaHandler"></router-link>
          <span>首页</span>          
        </li>
        <li>
          <router-link to="/studyclass" class="studyclass" ></router-link>
          <span>分类</span>          
        </li>
        <li>
          <router-link to="/mystudy" class="mystudy" ></router-link>
          <span>我的学习</span>          
        </li>
        <li>
          <router-link to="/main" class="main" ></router-link>
          <span>我的</span>          
        </li>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      isa: true
    }
  },
  methods: {
    isaHandler () {
      this.isa = !this.isa
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  *
    margin : 0
    padding  : 0
  .nav
    width 100%
    height 50px
    position fixed
    bottom 0
    left 0
    display flex
    background-color #ffffff
  .nav li
    list-style :none
    height: 50px
    width :25%
    text-align center
    font-size :12px
    line-height 12px

  .nav li a
    display block
    height: 35px
    width :100%
  .home
    background url(./images/sprite_tab_icons_03.png)
    background-size: 28px 28px
    background-repeat: no-repeat
    background-position  33px 3px
  .studyclass
    background url(./images/sprite_tab_icons_05.png)
    background-size: 28px 28px
    background-repeat: no-repeat
    background-position  33px 3px
  .mystudy
    background url(./images/sprite_tab_icons_07.png)
    background-size: 28px 28px
    background-repeat: no-repeat
    background-position  33px 3px
  .main
    background url(./images/sprite_tab_icons_11.png)
    background-size: 28px 28px
    background-repeat: no-repeat
    background-position  33px 3px
  .homes
    background url(./images/sprite_tab_icons_18.png)
    background-size: 28px 28px
    background-repeat: no-repeat
    background-position  33px 3px
</style>
